﻿<!DOCTYPE html>
<html>
  <head>
    <title>设计说明</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <meta name="apple-mobile-web-app-capable" content="yes"/>
    <link href="resources/css/jquery-ui-themes.css" type="text/css" rel="stylesheet"/>
    <link href="resources/css/axure_rp_page.css" type="text/css" rel="stylesheet"/>
    <link href="data/styles.css" type="text/css" rel="stylesheet"/>
    <link href="files/设计说明/styles.css" type="text/css" rel="stylesheet"/>
    <script src="resources/scripts/jquery-1.7.1.min.js"></script>
    <script src="resources/scripts/jquery-ui-1.8.10.custom.min.js"></script>
    <script src="resources/scripts/prototypePre.js"></script>
    <script src="data/document.js"></script>
    <script src="resources/scripts/prototypePost.js"></script>
    <script src="files/设计说明/data.js"></script>
    <script type="text/javascript">
      $axure.utils.getTransparentGifPath = function() { return 'resources/images/transparent.gif'; };
      $axure.utils.getOtherPath = function() { return 'resources/Other.html'; };
      $axure.utils.getReloadPath = function() { return 'resources/reload.html'; };
    </script>
  </head>
  <body>
    <div id="base" class="">

      <!-- Unnamed (矩形) -->
      <div id="u121" class="ax_default box_2">
        <div id="u121_div" class=""></div>
      </div>

      <!-- Unnamed (矩形) -->
      <div id="u122" class="ax_default _文本段落">
        <img id="u122_img" class="img " src="images/设计说明/u122.png"/>
        <div id="u122_text" class="text ">
          <p style="font-size:28px;"><span style="font-family:'Arial Negreta', 'Arial Normal', 'Arial';font-weight:700;">首页</span></p><p style="font-size:20px;"><span style="font-family:'Arial Normal', 'Arial';font-weight:400;">1、搜索栏</span></p><p style="font-size:20px;"><span style="font-family:'Arial Normal', 'Arial';font-weight:400;">2、广告轮播图</span></p><p style="font-size:20px;"><span style="font-family:'Arial Normal', 'Arial';font-weight:400;">3、猜你喜欢</span></p><p style="font-size:20px;"><span style="font-family:'Arial Normal', 'Arial';font-weight:400;">4、新碟上市</span></p><p style="font-size:20px;"><span style="font-family:'Arial Normal', 'Arial';font-weight:400;">5、唱片封面</span></p><p style="font-size:20px;"><span style="font-family:'Arial Normal', 'Arial';font-weight:400;">6、唱片名称</span></p><p style="font-size:20px;"><span style="font-family:'Arial Normal', 'Arial';font-weight:400;">7、歌手姓名</span></p><p style="font-size:20px;"><span style="font-family:'Arial Normal', 'Arial';font-weight:400;">8、唱片价格</span></p><p style="font-size:20px;"><span style="font-family:'Arial Normal', 'Arial';font-weight:400;">9、唱片销量</span></p><p style="font-size:20px;"><span style="font-family:'Arial Normal', 'Arial';font-weight:400;">10、试听页</span></p><p style="font-size:20px;"><span style="font-family:'Arial Normal', 'Arial';font-weight:400;">11、唱片介绍</span></p><p style="font-size:20px;"><span style="font-family:'Arial Normal', 'Arial';font-weight:400;">12、评论</span></p><p style="font-size:20px;"><span style="font-family:'Arial Normal', 'Arial';font-weight:400;">13、店铺</span></p><p style="font-size:20px;"><span style="font-family:'Arial Normal', 'Arial';font-weight:400;">14、客服</span></p><p style="font-size:20px;"><span style="font-family:'Arial Normal', 'Arial';font-weight:400;">15、收藏</span></p><p style="font-size:20px;"><span style="font-family:'Arial Normal', 'Arial';font-weight:400;">16、加入购物车</span></p><p style="font-size:20px;"><span style="font-family:'Arial Normal', 'Arial';font-weight:400;">17、立即购买</span></p><p style="font-size:20px;"><span style="font-family:'Arial Normal', 'Arial';font-weight:400;">18、历史记录</span></p><p style="font-size:20px;"><span style="font-family:'Arial Normal', 'Arial';font-weight:400;">19、热门搜索</span></p><p style="font-size:20px;"><span style="font-family:'Arial Normal', 'Arial';font-weight:400;">20、歌手分类</span></p>
        </div>
      </div>

      <!-- Unnamed (水平线) -->
      <div id="u123" class="ax_default line">
        <img id="u123_img" class="img " src="images/设计说明/u123.png"/>
      </div>

      <!-- Unnamed (垂直线) -->
      <div id="u124" class="ax_default line">
        <img id="u124_img" class="img " src="images/设计说明/u124.png"/>
      </div>

      <!-- Unnamed (矩形) -->
      <div id="u125" class="ax_default _一级标题">
        <div id="u125_div" class=""></div>
        <div id="u125_text" class="text ">
          <p><span>①重要必须的</span></p>
        </div>
      </div>

      <!-- Unnamed (矩形) -->
      <div id="u126" class="ax_default _一级标题">
        <div id="u126_div" class=""></div>
        <div id="u126_text" class="text ">
          <p><span>②重要不必须的</span></p>
        </div>
      </div>

      <!-- Unnamed (矩形) -->
      <div id="u127" class="ax_default _一级标题">
        <div id="u127_div" class=""></div>
        <div id="u127_text" class="text ">
          <p><span>③必须不重要的</span></p>
        </div>
      </div>

      <!-- Unnamed (矩形) -->
      <div id="u128" class="ax_default _一级标题">
        <div id="u128_div" class=""></div>
        <div id="u128_text" class="text ">
          <p><span>④不重要不必须的</span></p>
        </div>
      </div>

      <!-- Unnamed (矩形) -->
      <div id="u129" class="ax_default _文本段落">
        <div id="u129_div" class=""></div>
        <div id="u129_text" class="text ">
          <p><span>5、唱片封面</span></p><p><span>6、唱片名称</span></p><p><span>7、歌手姓名</span></p><p><span>8、唱片价格</span></p><p><span>16、加入购物车</span></p><p><span>17、立即购买</span></p>
        </div>
      </div>

      <!-- Unnamed (矩形) -->
      <div id="u130" class="ax_default _文本段落">
        <div id="u130_div" class=""></div>
        <div id="u130_text" class="text ">
          <p><span>9、唱片销量</span></p><p><span>10、试听页</span></p><p><span>11、唱片介绍</span></p>
        </div>
      </div>

      <!-- Unnamed (矩形) -->
      <div id="u131" class="ax_default _文本段落">
        <div id="u131_div" class=""></div>
        <div id="u131_text" class="text ">
          <p><span>13、店铺</span></p><p><span>14、客服</span></p><p><span>18、历史记录</span></p><p><span>19、热门搜索</span></p>
        </div>
      </div>

      <!-- Unnamed (矩形) -->
      <div id="u132" class="ax_default _文本段落">
        <div id="u132_div" class=""></div>
        <div id="u132_text" class="text ">
          <p><span>1、搜索栏</span></p><p><span>2、广告轮播图</span></p><p><span>3、猜你喜欢</span></p><p><span>4、新碟上市</span></p><p><span>15、收藏</span></p><p><span>20、歌手分类</span></p>
        </div>
      </div>

      <!-- Unnamed (矩形) -->
      <div id="u133" class="ax_default _文本段落">
        <div id="u133_div" class=""></div>
        <div id="u133_text" class="text ">
          <p><span>黄色：FCCB02</span></p>
        </div>
      </div>

      <!-- Unnamed (矩形) -->
      <div id="u134" class="ax_default _文本段落">
        <div id="u134_div" class=""></div>
        <div id="u134_text" class="text ">
          <p><span>黄棕色：7D6811</span></p>
        </div>
      </div>

      <!-- Unnamed (矩形) -->
      <div id="u135" class="ax_default _一级标题">
        <div id="u135_div" class=""></div>
        <div id="u135_text" class="text ">
          <p><span>布局说明</span></p>
        </div>
      </div>

      <!-- Unnamed (图片) -->
      <div id="u136" class="ax_default image">
        <img id="u136_img" class="img " src="images/版式设计图/u5.jpg"/>
      </div>

      <!-- Unnamed (图片) -->
      <div id="u137" class="ax_default image">
        <img id="u137_img" class="img " src="images/版式设计图/u8.jpg"/>
      </div>

      <!-- Unnamed (图片) -->
      <div id="u138" class="ax_default image">
        <img id="u138_img" class="img " src="images/版式设计图/u9.jpg"/>
      </div>

      <!-- Unnamed (矩形) -->
      <div id="u139" class="ax_default _文本段落">
        <div id="u139_div" class=""></div>
        <div id="u139_text" class="text ">
          <p><span>1、卡片式</span></p><p><span>卡片式设计可以对不同的信息进行整合，提高用户信息获取速度，减少用户思考时间时，并且提高页面规范性，有一种规整之美。</span></p>
        </div>
      </div>

      <!-- Unnamed (垂直线) -->
      <div id="u140" class="ax_default arrow">
        <img id="u140_img" class="img " src="images/版式设计图/u16.png"/>
      </div>

      <!-- Unnamed (图片) -->
      <div id="u141" class="ax_default image">
        <img id="u141_img" class="img " src="images/版式设计图/u53.jpg"/>
      </div>

      <!-- Unnamed (图片) -->
      <div id="u142" class="ax_default image">
        <img id="u142_img" class="img " src="images/版式设计图/u52.jpg"/>
      </div>

      <!-- Unnamed (图片) -->
      <div id="u143" class="ax_default image">
        <img id="u143_img" class="img " src="images/版式设计图/u58.jpg"/>
      </div>

      <!-- Unnamed (矩形) -->
      <div id="u144" class="ax_default _文本段落">
        <div id="u144_div" class=""></div>
        <div id="u144_text" class="text ">
          <p><span>2、无线框</span></p><p><span>采用无线框布局，使界面更简洁，给予足够的留白，给用户留下舒适的阅读体验。将有规律的内容通过大图和文字的方式展现，简洁大方易识别。</span></p>
        </div>
      </div>

      <!-- Unnamed (垂直线) -->
      <div id="u145" class="ax_default arrow">
        <img id="u145_img" class="img " src="images/版式设计图/u16.png"/>
      </div>

      <!-- Unnamed (矩形) -->
      <div id="u146" class="ax_default _一级标题">
        <div id="u146_div" class=""></div>
        <div id="u146_text" class="text ">
          <p><span>设计说明</span></p>
        </div>
      </div>

      <!-- Unnamed (矩形) -->
      <div id="u147" class="ax_default label">
        <div id="u147_div" class=""></div>
        <div id="u147_text" class="text ">
          <p><span>采用白色为底色，</span></p>
        </div>
      </div>

      <!-- Unnamed (矩形) -->
      <div id="u148" class="ax_default label">
        <div id="u148_div" class=""></div>
        <div id="u148_text" class="text ">
          <p><span>为主要配色，因为有研究证明暖色可以</span></p>
        </div>
      </div>

      <!-- Unnamed (矩形) -->
      <div id="u149" class="ax_default label">
        <div id="u149_div" class=""></div>
        <div id="u149_text" class="text ">
          <p><span>促进用户的购买欲，所以挑选好看的芒果黄作为APP主要配色。</span></p>
        </div>
      </div>

      <!-- Unnamed (矩形) -->
      <div id="u150" class="ax_default label">
        <div id="u150_div" class=""></div>
        <div id="u150_text" class="text ">
          <p><span>然后挑选</span></p>
        </div>
      </div>

      <!-- Unnamed (矩形) -->
      <div id="u151" class="ax_default label">
        <div id="u151_div" class=""></div>
        <div id="u151_text" class="text ">
          <p><span>作为次要配色，这种颜色与黄色相搭不会刺眼，</span></p>
        </div>
      </div>

      <!-- Unnamed (矩形) -->
      <div id="u152" class="ax_default label">
        <div id="u152_div" class=""></div>
        <div id="u152_text" class="text ">
          <p><span>可以有效缓和黄色太过活跃的配色，造成视觉平衡。此外，挑选灰色</span></p>
        </div>
      </div>

      <!-- Unnamed (矩形) -->
      <div id="u153" class="ax_default label">
        <div id="u153_div" class=""></div>
        <div id="u153_text" class="text ">
          <p><span>作为非重要内容的配色，黑色作为通知栏文字配色，既有存在感也不会</span></p>
        </div>
      </div>

      <!-- Unnamed (矩形) -->
      <div id="u154" class="ax_default label">
        <div id="u154_div" class=""></div>
        <div id="u154_text" class="text ">
          <p><span>令人感到违和。</span></p>
        </div>
      </div>
    </div>
  </body>
</html>
